<!--  -->
<template>
  <div class="code-mirror-div">
<div>
    {{jsonValue}}
</div>
        <div class="tool-bar">

            <span>请选择主题</span>

            <el-select v-model="cmTheme" placeholder="请选择" size="small" style="width:150px">

                <el-option v-for="item in cmThemeOptions" :key="item" :label="item" :value="item"></el-option>

            </el-select>

            <span style="margin-left: 10px">请选择编辑模式</span>

            <el-select

                v-model="cmEditorMode"

                placeholder="请选择"

                size="small"

                style="width:150px"

                @change="onEditorModeChange"

            >

                <el-option

                    v-for="item in cmEditorModeOptions"

                    :key="item"

                    :label="item"

                    :value="item"

                ></el-option>

            </el-select>

            <el-button type="primary" size="small" style="margin-left:10x" @click="setStyle">修改样式</el-button>

            <el-button type="primary" size="small" style="margin-left:10x" @click="getValue">获取内容</el-button>

            <el-button type="primary" size="small" style="margin-left:10x" @click="setValue">修改内容</el-button>

        </div>

 

        <code-mirror-editor

            ref="cmEditor"

            :cmTheme="cmTheme"

            :cmMode="cmMode"

            :autoFormatJson="autoFormatJson"

            :jsonIndentation="jsonIndentation"

        ></code-mirror-editor>

    </div>
</template>

<script>
// 使用时需要根据CodeMirrorEditor.vue的实际存放路径，调整from后面的组件路径，以便正确引用

import CodeMirrorEditor from "./codeEdit.vue";
export default {
  data() {

        return {

            cmTheme: "default", // codeMirror主题

            // codeMirror主题选项

            cmThemeOptions: [

                "default",

                "3024-day",

                "3024-night",

                "abcdef",

                "ambiance",

                "ayu-dark",

                "ayu-mirage",

                "base16-dark",

                "base16-light",

                "bespin",

                "blackboard",

                "cobalt",

                "colorforth",

                "darcula",

                "dracula",

                "duotone-dark",

                "duotone-light",

                "eclipse",

                "elegant",

                "erlang-dark",

                "gruvbox-dark",

                "hopscotch",

                "icecoder",

                "idea",

                "isotope",

                "lesser-dark",

                "liquibyte",

                "lucario",

                "material",

                "material-darker",

                "material-palenight",

                "material-ocean",

                "mbo",

                "mdn-like",

                "midnight",

                "monokai",

                "moxer",

                "neat",

                "neo",

                "night",

                "nord",

                "oceanic-next",

                "panda-syntax",

                "paraiso-dark",

                "paraiso-light",

                "pastel-on-dark",

                "railscasts",

                "rubyblue",

                "seti",

                "shadowfox",

                "solarized dark",

                "solarized light",

                "the-matrix",

                "tomorrow-night-bright",

                "tomorrow-night-eighties",

                "ttcn",

                "twilight",

                "vibrant-ink",

                "xq-dark",

                "xq-light",

                "yeti",

                "yonce",

                "zenburn"

            ],

            cmEditorMode: "default", // 编辑模式

            // 编辑模式选项

            cmEditorModeOptions: [

                "default",

                "json",

                "sql",

                "javascript",

                "css",

                "xml",

                "html",

                "yaml",

                "markdown",

                "python"

            ],

            cmMode: "application/json", //codeMirror模式

            jsonIndentation: 2, // json编辑模式下，json格式化缩进 支持字符或数字，最大不超过10，默认缩进2个空格

            autoFormatJson: true, // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭
            jsonValue :{

                name: "laiyu",

                addr: "广东省深圳市",

                other: "nothing",

                tel: "168888888",

                intro: [{ item1: "item1" }]

            }
        };

    },

  components: {
      CodeMirrorEditor
  },

  computed: {},

  mounted(){},

  methods: {

        // 切换编辑模式事件处理函数

        onEditorModeChange(value) {

            switch (value) {

                case "json":

                    this.cmMode = "application/json";

                    break;

                case "sql":

                    this.cmMode = "sql";

                    break;

                case "javascript":

                    this.cmMode = "javascript";

                    break;

                case "xml":

                    this.cmMode = "xml";

                    break;

                case "css":

                    this.cmMode = "css";

                    break;

                case "html":

                    this.cmMode = "htmlmixed";

                    break;

                case "yaml":

                    this.cmMode = "yaml";

                    break;

                case "markdown":

                    this.cmMode = "markdown";

                    break;

                case "python":

                    this.cmMode = "python";

                    break;

                default:

                    this.cmMode = "application/json";

            }

        },

        // 修改样式（不推荐，建议参考<style>中的样式，提前配置好样式）

        setStyle() {

            let styleStr =" padding: 20px; height: auto;";
            this.$refs.cmEditor.setStyle(styleStr);

        },

        //获取内容

        getValue() {

            let content = this.$refs.cmEditor.getValue();
            this.jsonValue = content
            console.log(content);

        },

        //修改内容

        setValue() {

            // let jsonValue = {

            //     name: "laiyu",

            //     addr: "广东省深圳市",

            //     other: "nothing",

            //     tel: "168888888",

            //     intro: [{ item1: "item1" }]

            // };

 

            this.$refs.cmEditor.setValue(JSON.stringify(this.jsonValue));

        }

    },


}

</script>
<style lang='scss' scoped>
.CodeMirror {
    // position: absolute;
    // top: 80px;
    // left: 2px;
    // right: 5px;

    // bottom: 0px;

    padding: 2px;

    height: auto; 

    overflow-y: auto;

}
.code-mirror-div {

    // position: absolute;

    // top: 0px;

    // left: 2px;

    // right: 5px;

    // bottom: 0px;

    padding: 100px;
    margin-bottom:50px;
    .tool-bar {

        // top: 20px;

        margin: 30px 2px 0px 20px;

    }
}
</style>